<template>
  <div>
    <h1>设置</h1>
    <el-form label-width="100px" style="max-width: 520px;">
      <el-form-item label="边框颜色">
        <div style="display: flex; align-items: center; gap: 12px;">
          <el-color-picker v-model="borderColor" show-alpha />
          <el-input v-model="borderColor" style="width: 140px;" />
        </div>
      </el-form-item>
      <el-form-item label="字体大小">
        <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
          <el-slider v-model="fontSize" :min="12" :max="32" :step="1" style="flex: 1;" />
          <el-input-number v-model="fontSize" :min="12" :max="32" :step="1" />
          <span style="margin-left: 4px;">px</span>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-top: 20px;">
      <div
        class="preview-box"
        :style="{
          border: `2px solid ${borderColor}`,
          fontSize: fontSize + 'px'
        }"
      >
        预览：这个区域会随设置变化。
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const DEFAULT_BORDER = '#409EFF'
const DEFAULT_FONT_SIZE = 14

const borderColor = ref(DEFAULT_BORDER)
const fontSize = ref(DEFAULT_FONT_SIZE)

const applyToRoot = () => {
  const root = document.documentElement
  root.style.setProperty('--app-border-color', borderColor.value)
  root.style.setProperty('--app-font-size', fontSize.value + 'px')
}

const load = () => {
  const savedBorder = localStorage.getItem('settings:borderColor')
  const savedFont = localStorage.getItem('settings:fontSize')
  if (savedBorder) borderColor.value = savedBorder
  if (savedFont && !Number.isNaN(Number(savedFont))) fontSize.value = Number(savedFont)
  applyToRoot()
}

const save = () => {
  localStorage.setItem('settings:borderColor', borderColor.value)
  localStorage.setItem('settings:fontSize', String(fontSize.value))
  applyToRoot()
}

const reset = () => {
  borderColor.value = DEFAULT_BORDER
  fontSize.value = DEFAULT_FONT_SIZE
  save()
}

onMounted(load)

watch([borderColor, fontSize], () => {
  applyToRoot()
})
</script>

<style scoped>
.preview-box {
  padding: 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
</style>